<template>
  <view class="contact-detail">
    <!-- 联系人基本信息 -->
    <view class="contact-header">
      <image class="contact-avatar" :src="contact.avatar || 'https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png'" mode="aspectFill" />
      <view class="contact-name">{{ contact.name }}</view>
      <view class="contact-relation">{{ contact.relation }}</view>
    </view>

    <!-- 联系人信息列表 -->
    <view class="contact-info">
      <view class="info-item">
        <text class="info-label">宗族排行</text>
        <text class="info-value">{{ contact.rank }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">世系</text>
        <text class="info-value">{{ contact.generation }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">所在地</text>
        <text class="info-value">{{ contact.location }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">电话</text>
        <text class="info-value">{{ contact.phone }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">出生日期</text>
        <text class="info-value">{{ contact.birthdate }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">备注</text>
        <text class="info-value">{{ contact.remarks }}</text>
      </view>
    </view>

    <!-- 与联系人的关系图谱 -->
    <view class="relation-chart">
      <view class="section-title">关系图谱</view>
      <view class="chart-preview">
        <image class="chart-image" src="/static/relation-chart.png" mode="aspectFit" />
        <view class="chart-tip">点击查看完整家族关系</view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view class="action-button" @click="startChat">
        <wd-icon name="message" size="22px" color="#3B8DFF" />
        <text>发消息</text>
      </view>
      <view class="action-button" @click="makeCall">
        <wd-icon name="phone" size="22px" color="#07c160" />
        <text>打电话</text>
      </view>
      <view class="action-button" @click="viewInTree">
        <wd-icon name="family" size="22px" color="#ff9900" />
        <text>家谱查看</text>
      </view>
    </view>

    <!-- 相册 -->
    <view class="photos">
      <view class="section-title">相册</view>
      <scroll-view class="photo-scroll" scroll-x>
        <view class="photo-list">
          <view
            v-for="(photo, index) in contact.photos"
            :key="index"
            class="photo-item"
            @click="previewImage(photo)"
          >
            <image class="photo" :src="photo" mode="aspectFill" />
          </view>
          <view v-if="contact.photosCount > contact.photos.length" class="photo-more">
            <text>查看更多</text>
            <wd-icon name="right" size="16px" color="#999" />
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 共同参与的活动 -->
    <view class="activities">
      <view class="section-title">共同参与的活动</view>
      <view class="activity-list">
        <view
          v-for="(activity, index) in contact.activities"
          :key="index"
          class="activity-item"
          @click="viewActivity(activity)"
        >
          <view class="activity-date">
            <text class="date">{{ activity.date }}</text>
          </view>
          <view class="activity-content">
            <text class="activity-title">{{ activity.title }}</text>
            <text class="activity-desc">{{ activity.description }}</text>
          </view>
          <wd-icon name="right" size="16px" color="#999" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

// 获取路由参数
const route = useRoute();
const contactName = decodeURIComponent(route.query.name as string);

// 设置页面标题
uni.setNavigationBarTitle({
  title: contactName,
});

// 联系人数据
const contact = ref({
  name: contactName,
  avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png",
  relation: "四代孙女",
  rank: "宗族排行第23",
  generation: "第四世",
  location: "浙江省杭州市",
  phone: "13812345678",
  birthdate: "1990年3月15日",
  remarks: "善于组织宗族活动，热心公益事业",
  photos: ["https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png", "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png", "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png", "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png"],
  photosCount: 12,
  activities: [
    {
      date: "2024-04-05",
      title: "清明祭祖",
      description: "一起参加了宗族清明祭祖活动",
    },
    {
      date: "2024-01-21",
      title: "宗族年会",
      description: "共同参与组织了宗族春节联欢会",
    },
    {
      date: "2023-10-01",
      title: "家谱整理",
      description: "参与了家谱数字化整理工作",
    },
  ],
});

onMounted(() => {
  // 模拟获取联系人数据
  // 实际项目中应该根据联系人名称或ID请求详细数据
  console.log("加载联系人数据:", contactName);
});

// 开始聊天
function startChat() {
  uni.navigateTo({
    url: `/pages/chat/detail?id=${Date.now()}&name=${encodeURIComponent(contact.value.name)}&isGroup=false`,
  });
}

// 拨打电话
function makeCall() {
  uni.makePhoneCall({
    phoneNumber: contact.value.phone,
    fail: () => {
      uni.showToast({
        title: "拨打电话失败",
        icon: "none",
      });
    },
  });
}

// 在家谱树中查看
function viewInTree() {
  uni.navigateTo({
    url: `/pages/genealogy/tree?highlight=${encodeURIComponent(contact.value.name)}`,
  });
}

// 查看活动详情
function viewActivity(activity: any) {
  uni.navigateTo({
    url: `/pages/work/activity-detail?title=${encodeURIComponent(activity.title)}&date=${activity.date}`,
  });
}

// 预览照片
function previewImage(url: string) {
  uni.previewImage({
    current: url,
    urls: contact.value.photos,
  });
}
</script>

<style lang="scss">
.contact-detail {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 50rpx;
}

.contact-header {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50rpx 0;
}

.contact-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  margin-bottom: 20rpx;
}

.contact-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.contact-relation {
  font-size: 28rpx;
  color: #666;
}

.contact-info {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 0 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  height: 90rpx;
  line-height: 90rpx;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #333;
  font-size: 28rpx;
}

.info-value {
  color: #666;
  font-size: 28rpx;
}

.section-title {
  padding: 30rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.relation-chart {
  margin-top: 20rpx;
  background-color: #fff;
}

.chart-preview {
  padding: 0 30rpx 30rpx;
}

.chart-image {
  width: 100%;
  height: 300rpx;
  border-radius: 8rpx;
  background-color: #f0f0f0;
}

.chart-tip {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  background-color: #fff;
  margin-top: 20rpx;
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;

  text {
    font-size: 24rpx;
    color: #666;
    margin-top: 10rpx;
  }
}

.photos {
  margin-top: 20rpx;
  background-color: #fff;
}

.photo-scroll {
  padding: 0 0 30rpx 30rpx;
}

.photo-list {
  display: flex;
  flex-direction: row;
}

.photo-item {
  margin-right: 20rpx;
}

.photo {
  width: 180rpx;
  height: 180rpx;
  border-radius: 8rpx;
  background-color: #f0f0f0;
}

.photo-more {
  width: 180rpx;
  height: 180rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8rpx;

  text {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 8rpx;
  }
}

.activities {
  margin-top: 20rpx;
  background-color: #fff;
}

.activity-list {
  padding: 0 30rpx;
}

.activity-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-date {
  width: 140rpx;

  .date {
    font-size: 24rpx;
    color: #999;
  }
}

.activity-content {
  flex: 1;
  padding-right: 20rpx;
}

.activity-title {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.activity-desc {
  font-size: 24rpx;
  color: #999;
  display: block;
}
</style>
